<%- include('doctype') -%>

    <style>
        .body {
            padding: 40px 100px 40px;
            background-color: #fff;
            min-height: 410px;
        }
        
        .vs-form {
            padding: 20px 60px 40px;
            border: 1px solid #d6d6d6;
        }
        
        .form-group {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }
        
        .divide {
            padding-top: 20px;
            border-top: 2px dashed #454748;
        }
        
        .apply {
            height: 35px;
            line-height: 35px;
        }
        
        .serve-area {
            display: none;
        }
        
        .form-group input {
            width: 220px;
            outline: none;
            height: 35px;
            border: 1px solid #d6d6d6;
            padding: 3px 6px;
            box-sizing: border-box;
            caret-color: teal;
            transition: all .3s;
        }
        
        .form-group input[type="checkbox"] {
            width: auto;
            height: auto;
            vertical-align: middle;
        }
        
        .form-group input:focus {
            border-color: lightseagreen;
            box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
        }
        
        .type {
            display: inline-block;
        }
        
        #other-type {
            margin-left: 30px;
        }
        
        #detailAddr {
            flex: 0;
        }
        
        .distpicker {
            display: inline-block;
        }
        
        .distpicker select {
            height: 30px;
            line-height: 30px;
            width: 32%;
            outline: none;
            cursor: pointer;
            border: 1px solid #d6d6d6;
            transition: all .3s;
            color: #666;
        }
        
        .distpicker select:focus {
            border-color: lightseagreen;
            box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
        }
        
        .check-btn,
        .save-btn,
        .add-btn {
            width: 120px;
            height: 35px;
            line-height: 35px;
            outline: none;
            border: 1px solid #d6d6d6;
            background-color: #f0f0f0;
            transition: all .3s;
        }
        
        .check-btn:hover,
        .save-btn:hover,
        .add-btn:hover {
            cursor: pointer;
            background-color: #d5e1e1;
        }
        
        .se-name {
            text-indent: 28px;
        }
        
        .save-btn {
            width: 240px;
            margin-top: 60px;
        }
    </style>

    <%- include('headbody') -%>

        <%- include('header') -%>
            <!-- body -->
            <div class="body">
                <form class="vs-form" autocomplete="off">
                    <div class="form-group">
                        <label class="se-name">
                        <span>姓名：</span>
                        <input type="text" name="name" id="name">
                    </label>
                        <label>
                        <span>座机号：</span>
                        <input type="number" name="telNumber" id="telNumber">
                    </label>
                        <label>
                        <span>身份证号：</span>
                        <input type="number" name = "IDNumber" id = "IDNumber">
                    </label>
                        <label>
                        <span>出生日期：</span>
                        <input type="date" name = "birthday" id="birthday">
                    </label>
                    </div>
                    <div class="form-group">
                        <label>
                        <span>家庭住址：</span>
                        <input type="text" name="address" id="address">
                    </label>
                    </div>
                    <div class="form-group">
                        <label>
                        <span>服务区域：</span>
                        <div data-toggle="distpicker" class="distpicker">
                            <select data-province="四川省"></select>
                            <select data-city="成都市"></select>
                            <select data-district="武侯区"></select>
                        </div>
                        <button type = "button" class = "add-btn">添加服务区域</button>
                    </label>
                    </div>
                    <div class="form-group divide">
                        <span>您从事的工作：</span>
                    </div>
                    <div class="form-group">
                        <label>
                        <input type="checkbox">
                        <span>村干部（村委书记、村长、村会计、村支书、妇联主任）</span>
                    </label>
                        <label>
                           <span>从业时间：</span>
                           <input type="number" name="cgb-working-time" id="cgb-working-time"> 年
                    </label>
                    </div>
                    <div class="form-group">
                        <label>
                        <input type="checkbox">
                        <span>农技（种子经营 、种子繁殖、农业技术、农业技术咨询、农业服务、农机服务）</span>
                    </label>
                        <label>
                           <span>本村的农户约有：</span>
                           <input type="number" name="nh-amount" id="nh-amount"> 户
                    </label>
                    </div>
                    <div class="form-group">
                        <label>
                        <input type="checkbox">
                        <span>农资（农资经销、农资商、农资店、农资超市）</span>
                    </label>
                        <label>
                           <span>本村的农地数约有：</span>
                           <input type="number" name="nd-amount" id="nd-amount"> 亩
                    </label>
                    </div>
                    <div class="form-group">
                        <label>
                        <input type="checkbox">
                        <span>个体（超市、个体经营、服装店、五金店、出租司机）</span>
                    </label>
                    </div>
                    <div class="form-group">
                        <label>
                        <input type="checkbox">
                        <span>农场主（合作社、包地大户）</span>
                    </label>
                    </div>
                    <div class="form-group">
                        <label>
                        <input type="checkbox">
                        <span>特殊职业（教师、医生、邮政、信贷</span>
                    </label>
                    </div>
                    <div class="form-group divide">
                        <label>
                        <span>输入您所在SE的编号：</span>
                        <input type="number" name="villageNumber" id="villageNumber">
                        <button type = "button" class = "check-btn">检测编号</button>
                    </label>
                    </div>
                    <div class="form-group">
                        <label class="apply">
                        <input type="checkbox" id = "apply">
                        <span>同时申请成为村级服务站</span>
                    </label>
                        <label class="serve-area">
                        <span>服务区域：</span>
                        <div data-toggle="distpicker" class="distpicker">
                            <select data-province="四川省"></select>
                            <select data-city="成都市"></select>
                            <select data-district="武侯区"></select>
                        </div>
                        <button type = "button" class = "add-btn">添加服务区域</button>
                    </label>
                    </div>
                    <button type="submit" class="save-btn">提交申请成为村级服务站</button>
                </form>
            </div>

            <%- include('footer') -%>